:host([data-radius='none']),
:root[data-radius='none'] {
    --auto-border-radius: 0px !important;
}

:host([data-spacing='none']),
:root[data-spacing='none'] {
    --auto-spacing: 0px !important;
    --auto-padding: var(--t-spacing-medium) !important;
    --auto-margin: var(--t-spacing-medium) !important;
}

:host([data-spacing='medium']),
:root[data-spacing='medium'] {
    --auto-spacing: var(--t-spacing-medium) !important;
    --auto-padding: var(--t-spacing-medium) !important;
    --auto-margin: var(--t-spacing-medium) !important;
}

:root,
:host {
    /* 主色调 */
    --auto-primary-color: var(--t-color-primary-5);
    --auto-success-color: var(--t-color-success-5);
    --auto-danger-color: var(--t-color-danger-5);
    --auto-warning-color: var(--t-color-warning-5);
    --auto-info-color: var(--t-color-info-5);
    --auto-theme-color: var(--t-color-theme-5);
    /* 字体颜色oklch(from var(--auto-color) calc(l > 0.6 ? l - 0.2 : l + 0.2) c h) */
    --auto-color: var(--t-theme-color);
    --auto-secondary-color: var(--t-color-theme-4);
    --auto-disable-color: var(--t-color-theme-3);
    --auto-dark-color: color-mix(in srgb, var(--auto-color), black 20%);
    --auto-light-color: color-mix(in srgb, var(--auto-color), white 20%);

    /* 边框颜色 */
    --auto-border-color: var(--t-color-theme-3);
    --auto-border-active-color: var(--t-color-primary-6);
    /* 排版/字体 */
    --auto-font: var(--auto-font-weight) var(--auto-font-size)/1.5 var(--auto-font-family);
    --auto-font-family: Lantinghei SC,
        Microsoft Yahei,
        Hiragino Sans GB,
        Microsoft Sans Serif,
        WenQuanYi Micro Hei,
        sans-serif;
    --auto-font-size: var(--t-font-size-medium);
    --auto-font-weight: var(--t-font-weight-medium);
    --auto-letter-spacing: var(--t-letter-spacing-medium);
    --auto-line-height: var(--t-line-height-medium);

    /* 标题，用于导航/标题栏/标签页标题 */
    --auto-title-font: calc(var(--auto-font-weight) + 200) calc(var(--auto-font-size) * 1.1)/1.5 var(--auto-font-family);
    --auto-title-color: var(--t-color-primary-6);

    /* 边框/间距 */
    --auto-spacing: var(--t-spacing-medium);
    --auto-padding: var(--t-spacing-medium);
    --auto-margin: var(--t-spacing-medium);
    --auto-border: 1px solid var(--auto-border-color);
    --auto-active-border: 1px solid var(--auto-border-active-color);
    --auto-border-radius: var(--t-border-radius-medium);
    --auto-shadow: var(--t-shadow-medium);

    /* 输入框 */
    --auto-input-padding: calc(0.5 * var(--auto-padding));
    --auto-input-height: var(--t-line-height-medium);

    /* 背景颜色，用于面板/对话框/组件的背景 */
    --auto-bgcolor: var(--t-theme-bgcolor);
    /* 亮色: 相对于背景的亮色*/
    --auto-light-bgcolor: color-mix(in hsl, var(--auto-bgcolor), white 20%);
    /* 暗色: 相对于背景的暗色背景*/
    --auto-dark-bgcolor: color-mix(in hsl, var(--auto-bgcolor), black 20%);
    /* 面板背景颜色：用于面板/区块/Drawer等背景颜色*/
    --auto-panel-bgcolor: var(--t-theme-bgcolor-1);
    /** 标题背景颜色：用于标题/标题栏的背景颜色*/
    --auto-title-bgcolor: var(--t-theme-bgcolor-2);
    /** 输入框背景颜色：用于输入框背景颜色*/
    --auto-input-bgcolor: var(--t-theme-bgcolor);
    /** 随随色背景颜色：用于自动选中颜色，或根据背景颜色自动匹配背景颜色*/
    --auto-selected-bgcolor: color-mix(in srgb, var(--t-color-theme-3) 40%, transparent);

    --auto-icon-size: calc(1.5 * var(--t-font-size-medium));
}

:host([data-radius='x-small']),
[data-radius='x-small'] {
    --auto-border-radius: var(--t-border-radius-x-small);
}

:host([data-spacing='x-small']),
[data-spacing='x-small'] {
    --auto-spacing: var(--t-spacing-x-small) !important;
    --auto-padding: var(--t-spacing-x-small) !important;
    --auto-margin: var(--t-spacing-x-small) !important;
}

:host([data-size='x-small']),
[data-size='x-small'] {
    /* 排版/字体 */
    --auto-font-size: var(--t-font-size-x-small);
    --auto-font-weight: var(--t-font-weight-x-small);
    --auto-spacing: var(--t-spacing-x-small);
    --auto-padding: var(--t-spacing-x-small);
    --auto-margin: var(--t-spacing-x-small);
    --auto-letter-spacing: var(--t-letter-spacing-x-small);
    --auto-line-height: var(--t-line-height-x-small);
    /* 用于内边距和外边距 */
    --auto-shadow: var(--t-shadow-x-small);
    --auto-icon-size: calc(1.5 * var(--t-font-size-x-small));
    /* 输入框 */
    --auto-input-height: var(--t-input-height-x-small);
}

:host([data-radius='small']),
[data-radius='small'] {
    --auto-border-radius: var(--t-border-radius-small);
}

:host([data-spacing='small']),
[data-spacing='small'] {
    --auto-spacing: var(--t-spacing-small) !important;
    --auto-padding: var(--t-spacing-small) !important;
    --auto-margin: var(--t-spacing-small) !important;
}

:host([data-size='small']),
[data-size='small'] {
    /* 排版/字体 */
    --auto-font-size: var(--t-font-size-small);
    --auto-font-weight: var(--t-font-weight-small);
    --auto-spacing: var(--t-spacing-small);
    --auto-padding: var(--t-spacing-small);
    --auto-margin: var(--t-spacing-small);
    --auto-letter-spacing: var(--t-letter-spacing-small);
    --auto-line-height: var(--t-line-height-small);
    /* 用于内边距和外边距 */
    --auto-shadow: var(--t-shadow-small);
    --auto-icon-size: calc(1.5 * var(--t-font-size-small));
    /* 输入框 */
    --auto-input-height: var(--t-input-height-small);
}

:host([data-radius='large']),
[data-radius='large'] {
    --auto-border-radius: var(--t-border-radius-large);
}

:host([data-spacing='large']),
[data-spacing='large'] {
    --auto-spacing: var(--t-spacing-large) !important;
    --auto-padding: var(--t-spacing-large) !important;
    --auto-margin: var(--t-spacing-large) !important;
}

:host([data-size='large']),
[data-size='large'] {
    /* 排版/字体 */
    --auto-font-size: var(--t-font-size-large);
    --auto-font-weight: var(--t-font-weight-large);
    --auto-spacing: var(--t-spacing-large);
    --auto-padding: var(--t-spacing-large);
    --auto-margin: var(--t-spacing-large);
    --auto-letter-spacing: var(--t-letter-spacing-large);
    --auto-line-height: var(--t-line-height-large);
    /* 用于内边距和外边距 */
    --auto-shadow: var(--t-shadow-large);
    --auto-icon-size: calc(1.5 * var(--t-font-size-large));
    /* 输入框 */
    --auto-input-height: var(--t-input-height-large);
}

:host([data-radius='x-large']),
[data-radius='x-large'] {
    --auto-border-radius: var(--t-border-radius-x-large);
}

:host([data-spacing='x-large']),
[data-spacing='x-large'] {
    --auto-spacing: var(--t-spacing-x-large) !important;
    --auto-padding: var(--t-spacing-x-large) !important;
    --auto-margin: var(--t-spacing-x-large) !important;
}

:host([data-size='x-large']),
[data-size='x-large'] {
    /* 排版/字体 */
    --auto-font-size: var(--t-font-size-x-large);
    --auto-font-weight: var(--t-font-weight-x-large);
    --auto-spacing: var(--t-spacing-x-large);
    --auto-padding: var(--t-spacing-x-large);
    --auto-margin: var(--t-spacing-x-large);
    --auto-letter-spacing: var(--t-letter-spacing-x-large);
    --auto-line-height: var(--t-line-height-x-large);
    /* 用于内边距和外边距 */
    --auto-shadow: var(--t-shadow-large);
    --auto-icon-size: calc(1.5 * var(--t-font-size-large));
    --auto-input-height: var(--t-input-height-x-large);
}